<template>
  <div class="user_info">
    <header>
      <div class="nav_wrap">
        <h1 class="logo">
          <a :href="GLOBAL.RNTY_BASE_URL">睿那体育</a>
        </h1>
      </div>
    </header>
    <div class="user_info_main">
      <el-tabs :tab-position="tabPosition" style="height: 200px;">
        <el-tab-pane label="学员信息">
          <el-tabs type="card" v-model="activeName" @tab-click="showStudyList">
            <el-tab-pane name="first" label="添加学员信息">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">
                <el-form-item label="姓名:" prop="name">
                  <el-input class="user_info_input" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="性别:" prop="sex">
                  <el-radio-group v-model="ruleForm.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="生日:" prop="birth">
                  <el-date-picker
                    v-model="ruleForm.birth"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="身份证号:" prop="cardId">
                  <el-input class="user_info_input" v-model="ruleForm.cardId"></el-input>
                </el-form-item>
                <el-form-item label="身高(cm):" prop="height">
                  <el-input class="user_info_input" v-model="ruleForm.height"></el-input>
                </el-form-item>
                <el-form-item label="体重(kg):" prop="weight">
                  <el-input class="user_info_input" v-model="ruleForm.weight"></el-input>
                </el-form-item>
                <el-form-item label="服装尺码:" prop="size">
                  <el-input class="user_info_input" v-model="ruleForm.size"></el-input>
                </el-form-item>
                <el-form-item label="紧急联系人姓名:" prop="contact">
                  <el-input class="user_info_input" v-model="ruleForm.contact"></el-input>
                </el-form-item>
                <el-form-item label="紧急联系人电话1:" prop="contactPhone1">
                  <el-input class="user_info_input" v-model="ruleForm.contactPhone1"></el-input>
                </el-form-item>
                <el-form-item label="紧急联系人电话2:" prop="contactPhone2">
                  <el-input class="user_info_input" v-model="ruleForm.contactPhone2"></el-input>
                </el-form-item>
                <el-form-item label="与紧急联系人关系:" prop="relationship">
                  <el-input class="user_info_input" v-model="ruleForm.relationship"></el-input>
                </el-form-item>
                <el-form-item label="现处星级:" prop="star">
                  <el-radio-group v-model="ruleForm.star" prop="star">
                    <el-radio label="一星"></el-radio>
                    <el-radio label="二星"></el-radio>
                    <el-radio label="三星"></el-radio>
                    <el-radio label="四星"></el-radio>
                    <el-radio label="五星"></el-radio>
                    <el-radio label="不清楚"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="是否已购意外伤害险:" prop="safe">
                  <el-radio-group v-model="ruleForm.safe">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="学员训练/试课场馆:" prop="place">
                  <el-radio class="venue" border
                      v-model="ruleForm.place" 
                      v-for="item in venue"  
                      :key="item.area" 
                      :label="item.area">{{item.area}}</el-radio>
                  <!-- <span style="display:flex;align-items:center;height:50px;">
                    <el-radio style="margin-top:0 !important" class="venue" v-model="ruleForm.place" >其他 </el-radio>
                    <el-input v-model="venuePlace"></el-input>
                  </span> -->
                </el-form-item>
                <el-form-item label="持续学习:" prop="study">
                    是否愿意持续的在睿那体育进行羽毛球学习与训练？
                  <el-radio-group v-model="ruleForm.study">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="参加比赛:" prop="compitition">
                  是否愿意代表睿那体育参加羽毛球比赛？
                  <el-radio-group v-model="ruleForm.compitition">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="初衷目的:" prop="reason">
                  学习羽毛球的初衷或目的？
                  <el-input
                    type="textarea"
                    :autosize = '{ minRows: 5 }'
                    placeholder="请输入内容"
                    v-model="ruleForm.reason">
                  </el-input>
                </el-form-item>
                <el-form-item class="send_data">
                  <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane name="second" label="信息列表">
              <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="cardId"
                  label="身份证号"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="contact"
                  label="紧急联系人"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="contactPhone1"
                  label="联系人电话1"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="contactPhone2"
                  label="联系人电话2"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="safe"
                  label="是否有意外险"
                  width="120">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button type="text" @click="changeStudy(scope.$index)" size="small">编辑</el-button>
                    <el-button @click="deleteStudyItem(scope.row.id)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="修改头像">
          <h3 class="change_pass">修改头像</h3>
          <el-upload
            class="avatar-uploader"
            :action= actionUrl
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers='headers'>
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__text">点击上传头像</div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2M</div>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="修改手机号">
          <h3 class="change_pass">修改手机号</h3>
          <el-form :model="ruleForm3" status-icon :rules="rules3" ref="ruleForm3" label-width="100px" class="demo-ruleForm">
            <el-form-item label="密码" prop="pass">
              <el-input class="user_info_input"  type="password" v-model="ruleForm3.pass" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="新手机号码" prop="newTel">
              <el-input class="user_info_input"  type="tel" v-model="ruleForm3.newTel" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="verCode">
              <el-input class="user_info_input"  type="text" v-model="ruleForm3.verCode" auto-complete="off"></el-input>
              <el-button :loading='isLoading1' v-if="canGet" type="primary" round @click="obtainVer(ruleForm3.newTel)"><span v-if="secondTime.isLoad">{{secondTime.time}}秒后再次发送</span><span v-else>免费接收验证码</span></el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm3')">提交</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import md5 from "md5";
export default {
  data(){
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if(this.isSure){

        }
      }
    };
    var validateTel = (rule, value, callback)=>{
      let reg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
        if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号'));
        }
        callback()
    };
    var checkbirth = (rule, value, callback)=>{
      let reg = /^[12][0-9]{3}-[0-1][0-9]-[0-3][0-9]$/;
      if (!reg.test(value)) {
          callback(new Error('请选择正确时间'));
        }
        callback()
    }
    var checkW = (rule, value, callback)=>{
      if (value.trim()=='') {
        callback(new Error('请输入体重'));
      }else if(isNaN(value)){
        callback(new Error('体重为纯数字'))
      }
      callback()
    }
    var checkH = (rule, value, callback)=>{
      if (value.trim()=='') {
        callback(new Error('请输入身高'));
      }else if(isNaN(value)){
        callback(new Error('身高为纯数字'))
      }
      callback()
    }
    var checkContactPhone1 = validateTel;
    var checkContactPhone2 = validateTel;
    var checkTel = (rule, value, callback)=>{
      let reg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
        if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号'));
          this.canGet = false
        }else{
          this.canGet = true;
        }
        callback()
    }
    var checkCardId = (rule, value, callback)=>{
      let reg15 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/; //15位
      let reg18 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;//18位
      if (!reg15.test(value)&&!reg18.test(value)) {
          callback(new Error('输入身份证号格式不正确'));
        }
        callback()
    }
    
    return{
      actionUrl:this.GLOBAL.API_ACCOUNT_RNTY_URL+'users/upload_head_img',
      headers:{
        Authorization:'Bearer ' + this.$cookie.get('rnty_access_token')
      },
      secondTime:{
        time:60,
        isLoad:false
      },
      isLoading1:false,
      canGet:false,
      textarea2:"",
      tabPosition: 'left',
      activeName:'first',
      isSure:false,
      venue:[],
      venuePlace:'',
      imageUrl: '',
      tableData: [],
      ruleForm: {
          name: '',
          sex:'',
          birth:'',
          cardId:'',
          height:'',
          weight:'',
          size:'',
          place:'',
          star:'',
          contact:'',
          contactPhone1:'',
          contactPhone2:'',
          relationship:'',
          safe:'',
          study:'',
          compitition:'',
          reason:''
        },
      ruleForm3: {
        pass:'',
        newTel:'',
        verCode:'',
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        sex:[
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        cardId: [
          { required: true, validator: checkCardId, trigger: 'blur' }
        ],
        contactPhone1:[
          { required: true, validator: checkContactPhone1, trigger: 'blur'}
        ],
        contactPhone2: [
          { required: true, validator: checkContactPhone2, trigger: 'blur' }
        ],
        birth: [
          { required: true, validator: checkbirth, trigger: 'blur' }
        ],
        height: [
          {  required: true, validator: checkH, trigger: 'blur' }
        ],
        weight: [
          { required: true, validator: checkW, trigger: 'blur' }
        ],
        size: [
          { required: true, message: '请输入尺寸', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入紧急联系人姓名', trigger: 'blur' }
        ],
        relationship: [
          { required: true, message: '请输入与紧急联系人关系', trigger: 'blur' }
        ],
        place:  [
          { required: true, message: '请选择训练/试课场馆', trigger: 'blur' }
        ],
        star:  [
          { required: true, message: '请选择星级', trigger: 'blur' }
        ],
        safe:  [
          { required: true, message: '请选择保险情况', trigger: 'blur' }
        ],
        study: [
          { required: true, message: '请选学习意愿', trigger: 'blur' }
        ],
        compitition: [
          { required: true, message: '请选择参赛意愿', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请填写学习的初衷或目的', trigger: 'blur' }
        ]
      },
        rules3: {
          pass:[
            {required: true, message: '请输入密码', trigger: 'blur' }
          ],
          verCode:[
            {required: true, message: '请填写验证码', trigger: 'blur' }
          ],
          newTel:[
            {required: true, validator: checkTel, trigger: 'blur' }
          ]
        }
    }
  },
  mounted(){
    // 获取场馆地址
    this.GLOBAL.tokenRequest({
      method:"post",
      baseURL: this.GLOBAL.RNTY_SHOP_MALL_URL,
      url: "students/place",
    }).then(({ data: data }) => {
      // console.log(data);
      this.venue = data;
    });
  },
  methods:{
    obtainVer(mobile){
      if (this.isLoading1||this.secondTime.isLoad) {
        return
      }
      //倒计时
      this.isLoading1 = true;
      this.secondTime.isLoad = true;
      let timer = setInterval(()=>{
        if (this.secondTime.time==0) {
          clearInterval(timer)
          this.secondTime.isLoad = false;
          this.secondTime.time = 60;
          this.isLoading1 = false;
        }
        this.secondTime.time--
      },1000)
      // 发送验证码
      this.GLOBAL.request({
        method:'post',
        baseURL:this.GLOBAL.API_ACCOUNT_RNTY_URL,
        url:'scode/send',
        data: {
          mobile,
        }
      }).then(({data:data})=>{
        this.isLoading1 = false;
        if(data.status){
            this.$message({
              type:'success',
              message:data.message
            })
          }else{
            this.$message({
              type:'error',
              message:data.message
            })
          }
      })
    },
    changeStudy(index){
      this.ruleForm = this.tableData[index];
      this.activeName = "first"
    },
    deleteStudyItem(id){
      this.$confirm('此操作将永久删除该学员信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.GLOBAL.tokenRequest({
            method:"post",
            baseURL: this.GLOBAL.RNTY_SHOP_MALL_URL,
            url: "students/del",
            data:{
              id,
            }
          }).then(({ data: data }) => {
            this.showStudyList({name:"second"})
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    showStudyList(tab,event){
      if (tab.name == "first") {
        this.ruleForm = {}
      }
      if (tab.name =="second") {
        this.GLOBAL.tokenRequest({
          method:"post",
          baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
          url:'students/show',
        }).then(({data:data})=>{
          this.tableData = data;
          // console.log(data)
        })
      }
    },
    submitForm(formName) {
      // console.log(formName);
      
      if (this.ruleForm.place == undefined) {
        this.ruleForm.place = this.venuePlace;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName=='ruleForm') {
            let url = 'students/add';
            if (this.ruleForm.id) {
              url = 'students/modify'
            }
            this.GLOBAL.tokenRequest({
              method:"post",
              baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
              url,
              data:this.ruleForm
            }).then(({data:data})=>{
              if (data) {
                this.activeName = "second"
                this.showStudyList({name:"second"})
              }
            })
          }else if(formName=='ruleForm3'){
            this.GLOBAL.tokenRequest({
              method:'post',
              baseURL:this.GLOBAL.API_ACCOUNT_RNTY_URL,
              url:'users/update_mobile',
              data:{
                mobile:this.ruleForm3.newTel,
                sms_code:this.ruleForm3.verCode,
                password:md5(this.ruleForm3.pass)
              }
            }).then(({data:data})=>{
              if (data.status) {
                this.$message({
                  type:'success',
                  message:data.message
                })
                setTimeout(()=>window.location.href = this.GLOBAL.RNTY_BASE_URL,500)
              }else{
                this.$message({
                  type:'error',
                  message:data.message
                })
              }
            })
          }
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    handleAvatarSuccess(res) {
      if (res.status) {
        this.$message({
          type:'success',
          message:res.message
        })
        this.$cookie.set('rnty_userimg',res.data.url,'')
        this.imageUrl = res.data.url
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>
<style>
.user_info{
  background-color: #f5f5f5;
  min-height:100%;
  overflow: hidden;
}
.user_info .logo a{
  text-indent: -9999px;
  display: inline-block;
  width:300px;
  height:100px;
  background: url('../assets/images/logo.png') no-repeat;
  background-size: 300px 100px;
}
.user_info header{
  height:100px;
  margin-top:10px;
}
.user_info_main{
  width:800px;
  margin: 15px auto;
  min-height:650px;
  padding: 10px;
  box-sizing:border-box;
  background-color: #fff;
  text-align: left;
}
.el-tabs--left{
  height:100% !important;
}
.el-tabs__item{
  font-size:12px !important;
}
.el-tabs--left .el-tabs__nav{
  float: left;
}
.user_info_input{
  width:200px;
}
/* 上传头像 */
.avatar-uploader{
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  margin-top:50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.change_pass{
  line-height: 40px;
  border-bottom:1px solid #c1c1c1;
  margin-bottom:50px;
}
.send_data{
  margin-top:10px;
}
.venue{
  margin: 5px 5px 0 0  !important;
}
</style>

